import React, { useContext } from "react";
import { useNavigate } from "react-router-dom";
import ThemeContext from "../../store/themeContext";
import classes from "./Add.module.css";
import Card from "../../components/MyIndex/Card";
import { useState } from "react";
import MenuTitle from "../../components/MenuTitle/MenuTitle";
import purseSvg from "../../assets/svg/Index/purse.svg";
import purseActiveSvg from "../../assets/svg/Index/purse-active.svg";
import RecordList from "../../components/RecordList/RecordList";
import Navbar from "../../components/Navbar/Navbar";
import bg1 from "../../assets/svg/bg.svg";
import bg2 from "../../assets/svg/bg-dark.svg";
export default function Add() {
    const navigate = useNavigate();
    const { theme } = useContext(ThemeContext);
    const handleClick = (name) => {
        setCardListData(() => {
            return cardListData.map((item) => {
                if (item.name === name) {
                    item.check = true;
                    setNavigateName(item.name);
                } else {
                    item.check = false;
                }
                return item;
            });
        });
    };
    let [cardListData, setCardListData] = useState([
        {
            name: "Add Income",
            check: true,
        },
        {
            name: "Add Expense",
            check: false,
        },
    ]);
    const [navigateName, setNavigateName] = useState(cardListData[0].name);

    let menuData = [
        { name: "Food", date: "20 Feb 2020", methods: "Google Pay" },
        { name: "Uber", date: "26 Feb 2020", methods: "Cash" },
        { name: "Shopping", date: "28 Feb 2020", methods: "Paytm" },
    ];
    const pageGo = () => {
        navigate("/addSlot", { state: { name: navigateName.substring(3) } });
    };
    return (
        <div className={classes.add} style={{ background: theme === "light" ? "#fff" : "#000" }}>
            <header style={{ background: `url(${theme === "light" ? bg1 : bg2}) bottom center/cover no-repeat` }}>
                <Navbar linkName={"Add"} />
                <div className={classes.cardList}>
                    <ul className={classes.ul}>
                        <li className={classes.button} onClick={pageGo}>
                            +
                        </li>
                        {cardListData.map((item, index) => (
                            <Card handleClick={handleClick} key={index} padding="34rem 16rem 29rem" width="124rem" item={item} column={null}>
                                <img src={item.url ? item.url : item.check ? purseActiveSvg : purseSvg} alt="card" />
                            </Card>
                        ))}
                    </ul>
                </div>
            </header>
            <div className={classes.menu}>
                <MenuTitle theme={theme} title={"Latest Entries"} fCol="#7fc4dc" bgCol="#e5f3f8" divBg="#e5f3f8" />
                <ul className={classes.menuList}>
                    {menuData.map((item, index) => (
                        <RecordList key={index} item={item} theme={theme} />
                    ))}
                </ul>
            </div>
        </div>
    );
}
